<template>
  <div>
    <!-- 表格操作项 start  -->
    <!-- v-if="curMenuBtns.indexOf(systematicBtns[$md5(item.label)])>-1" -->
    <template v-for="(item, index) in tableBtn">
      <Button
        v-if="showBtn(item.label)"
        :key="index"
        type="primary"
        :icon="item.icon"
        class="ivu-mr-8"
        @click="tableTopOperate(item.name)"
        :loading="btnLoading"
        >{{ item.label }}</Button
      >
    </template>
    <!-- <Button icon="md-list"
                class="ivu-ml-8"
                v-show="tableBatchBtns && tableBatchBtns.length>0 && tableSelectData &&tableSelectData.length">批量操作</Button> -->
    <Dropdown
      class="ivu-ml-8"
      v-show="tableSelectData && tableSelectData.length > 0"
      @on-click="handleClickItem"
    >
      <Button
        >更多操作
        <Icon type="ios-arrow-down" />
      </Button>
      <DropdownMenu slot="list">
        <template v-for="(item, index) in tableBatchBtns">
          <DropdownItem
            :key="index"
            :name="item.name"
            v-if="showBtn(item.label)"
            >{{ item.label }}
          </DropdownItem>
        </template>
      </DropdownMenu>
    </Dropdown>
    <!-- 表格操作项 end -->
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import dynamictablebtns from '@/mixins/dynamictablebtns'; // 混入通用代码
import { ApiRequest, ApiRequestExportTable } from '@api/basePage';
import { getBtnsId } from '@/libs/btnsPermission';
export default {
  mixins: [dynamictablebtns],
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ]),
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  data () {
    return {
      btnLoading: false
    }
  },
  methods: {
    tableTopOperate (name) {
      if (name === 'export') {
        // 导出
        let searchParam = [];
        Object.keys(this.searchFormData).forEach(key => {
          searchParam.push({
            name: key,
            value: this.searchFormData[key]
          });
        });
        Object.keys(this.searchFormDataQ).forEach(key => {
          searchParam.push({
            name: key,
            value: this.searchFormDataQ[key]
          });
        });
        let data = {
          searchParam: JSON.stringify(searchParam)
        };
        let curBtnId = getBtnsId('导出');
        sessionStorage.setItem('buttonId', curBtnId);
        this.btnLoading = true;
        ApiRequestExportTable(
          this.requestApi.exportData.url,
          this.requestApi.exportData.type,
          data,
          true
        )
          .then(res => {
            this.btnLoading = false;
            const blob = new Blob([res], {
              type: 'application/octet-stream'
            });
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = '后台品类表.xlsx';
            link.click();
            window.URL.revokeObjectURL(blob); // 释放掉blob对象
          })
          .catch(() => {
            this.btnLoading = false;
            this.$Message.Message('导出失败');
          });
      } else {
        // 新增
        let curBtnId = getBtnsId('新增');
        sessionStorage.setItem('buttonId', curBtnId);
        this.$router.push({
          path: '/basics/category/categoryManage/categoryAdd',
          query: {}
        });
      }
    },
    handleClickItem (name) {
      if (name === 'delete') {
        let uuidArr = [];
        this.tableSelectData.forEach(item => {
          uuidArr.push(item.uuid);
        });
        this.$Modal.confirm({
          title: '批量删除',
          content: '确定要批量删除这些品类吗？',
          onOk: () => {
            let data = {
              uuids: uuidArr.join(',')
            };
            // 开始请求列表
            ApiRequest(
              this.requestApi.baseDeletes.url,
              this.requestApi.baseDeletes.type,
              data,
              true
            ).then(res => {
              if (res.retStatus === '1') {
                this.$Message.success('批量删除成功');
                this.tableSelectData = [];
                this.actionsChange();
              }
            });
          }
        });
      } else if (name === 'stopMall') {
      } else if (name === 'startMall') {
      }
    }
  }
};
</script>
